<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员仪表盘 - 局域网视频学习系统</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .dashboard-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }

        .welcome-text {
            font-size: 24px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }

        .welcome-subtitle {
            color: #666;
            font-size: 14px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: var(--shadow);
            text-align: center;
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-2px);
        }

        .stat-card.admin {
            border-top: 4px solid var(--admin-color);
        }

        .stat-card.teacher {
            border-top: 4px solid var(--teacher-color);
        }

        .stat-card.student {
            border-top: 4px solid var(--student-color);
        }

        .stat-card.video {
            border-top: 4px solid var(--primary-color);
        }

        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 24px;
            color: white;
        }

        .stat-icon.admin {
            background: var(--admin-color);
        }

        .stat-icon.teacher {
            background: var(--teacher-color);
        }

        .stat-icon.student {
            background: var(--student-color);
        }

        .stat-icon.video {
            background: var(--primary-color);
        }

        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }

        .stat-label {
            color: #666;
            font-size: 14px;
        }

        .content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .pending-videos {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .pending-videos .card-header {
            background: var(--warning-color);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .video-item {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .video-item:last-child {
            border-bottom: none;
        }

        .video-info h4 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
            color: var(--neutral-dark);
        }

        .video-meta {
            font-size: 12px;
            color: #666;
        }

        .video-actions {
            display: flex;
            gap: 8px;
        }

        .popular-courses {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .popular-courses .card-header {
            background: var(--success-color);
            color: white;
        }

        .course-item {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .course-item:last-child {
            border-bottom: none;
        }

        .course-info h4 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
            color: var(--neutral-dark);
        }

        .course-meta {
            font-size: 12px;
            color: #666;
        }

        .course-rank {
            background: var(--primary-color);
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }

        .course-rank.top1 {
            background: #FFD700;
        }

        .course-rank.top2 {
            background: #C0C0C0;
        }

        .course-rank.top3 {
            background: #CD7F32;
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            color: #ccc;
        }

        .sidebar-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            border-top: 1px solid var(--border-color);
        }

        .logout-btn {
            width: 100%;
            padding: 12px 16px;
            background: var(--error-color);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .logout-btn:hover {
            background: #c82333;
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h3>管理员工作台</h3>
        </div>
        <ul class="sidebar-nav">
            <li class="nav-item">
                <a href="dashboard.html" class="nav-link active">
                    <i>📊</i> 仪表盘
                </a>
            </li>
            <li class="nav-item">
                <a href="users.html" class="nav-link">
                    <i>👥</i> 用户管理
                </a>
            </li>
            <li class="nav-item">
                <a href="videos.html" class="nav-link">
                    <i>🎥</i> 视频管理
                </a>
            </li>
            <li class="nav-item">
                <a href="pending-videos.html" class="nav-link">
                    <i>📹</i> 待审核视频
                </a>
            </li>
            <li class="nav-item">
                <a href="exam-management.html" class="nav-link">
                    <i>📝</i> 考试管理
                </a>
            </li>
            <li class="nav-item">
                <a href="profile.html" class="nav-link">
                    <i>👤</i> 个人资料
                </a>
            </li>
        </ul>
        
        <!-- 退出登录 -->
        <div class="sidebar-footer">
            <button class="logout-btn" onclick="UserManager.logout()">
                <i>🚪</i> 退出登录
            </button>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="content-wrapper">
            <!-- 页面标题 -->
            <div class="dashboard-header">
                <h1 class="welcome-text">欢迎回来，<span data-user-name>管理员</span>！</h1>
                <p class="welcome-subtitle">今天是 <span id="currentDate"></span>，以下是系统概览</p>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card admin">
                    <div class="stat-icon admin">👑</div>
                    <div class="stat-number" id="adminCount">-</div>
                    <div class="stat-label">管理员</div>
                </div>
                <div class="stat-card teacher">
                    <div class="stat-icon teacher">👨‍🏫</div>
                    <div class="stat-number" id="teacherCount">-</div>
                    <div class="stat-label">老师</div>
                </div>
                <div class="stat-card student">
                    <div class="stat-icon student">👨‍🎓</div>
                    <div class="stat-number" id="studentCount">-</div>
                    <div class="stat-label">学生</div>
                </div>
                <div class="stat-card video">
                    <div class="stat-icon video">🎥</div>
                    <div class="stat-number" id="videoCount">-</div>
                    <div class="stat-label">视频总数</div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content-grid">
                <!-- 待审核视频 -->
                <div class="pending-videos">
                    <div class="card-header">
                        <h3>待审核视频</h3>
                        <span class="badge badge-warning" id="pendingCount">0</span>
                    </div>
                    <div class="card-body" id="pendingVideosList">
                        <div class="empty-state">
                            <i>📹</i>
                            <p>暂无待审核视频</p>
                        </div>
                    </div>
                </div>

                <!-- 热门课程 -->
                <div class="popular-courses">
                    <div class="card-header">
                        <h3>热门课程排行</h3>
                    </div>
                    <div class="card-body" id="popularCoursesList">
                        <div class="empty-state">
                            <i>🏆</i>
                            <p>暂无课程数据</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 侧边栏切换按钮 -->
    <button class="sidebar-toggle">☰</button>

    <script src="../js/common.js"></script>
    <script>
        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查权限
            if (!UserManager.hasPermission(0)) {
                Message.error('权限不足');
                setTimeout(() => {
                    window.location.href = '../login.html';
                }, 2000);
                return;
            }

            // 设置当前日期
            const now = new Date();
            const dateStr = now.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long'
            });
            document.getElementById('currentDate').textContent = dateStr;

            // 加载仪表盘数据
            loadDashboardData();
        });

        // 加载仪表盘数据
        async function loadDashboardData() {
            try {
                // 加载用户统计
                await loadUserStats();
                
                // 加载视频统计
                await loadVideoStats();
                
                // 加载待审核视频
                await loadPendingVideos();
                
                // 加载热门课程
                await loadPopularCourses();
                
            } catch (error) {
                console.error('加载仪表盘数据失败:', error);
                Message.error('加载数据失败');
            }
        }

        // 加载用户统计
        async function loadUserStats() {
            try {
                const response = await API.get('/user/all');
                if (response.success) {
                    const users = response.users;
                    const stats = {
                        admin: 0,
                        teacher: 0,
                        student: 0
                    };
                    
                    users.forEach(user => {
                        switch (user.role) {
                            case 0: stats.admin++; break;
                            case 1: stats.teacher++; break;
                            case 2: stats.student++; break;
                        }
                    });
                    
                    document.getElementById('adminCount').textContent = stats.admin;
                    document.getElementById('teacherCount').textContent = stats.teacher;
                    document.getElementById('studentCount').textContent = stats.student;
                }
            } catch (error) {
                console.error('加载用户统计失败:', error);
            }
        }

        // 加载视频统计
        async function loadVideoStats() {
            try {
                const response = await API.get('/video/all');
                if (response.success) {
                    document.getElementById('videoCount').textContent = response.videos.length;
                }
            } catch (error) {
                console.error('加载视频统计失败:', error);
            }
        }

        // 加载待审核视频
        async function loadPendingVideos() {
            try {
                const response = await API.get('/video/pending');
                if (response.success) {
                    const pendingVideos = response.videos;
                    
                    const container = document.getElementById('pendingVideosList');
                    const countEl = document.getElementById('pendingCount');
                    
                    countEl.textContent = pendingVideos.length;
                    
                    if (pendingVideos.length === 0) {
                        container.innerHTML = `
                            <div class="empty-state">
                                <i>📹</i>
                                <p>暂无待审核视频</p>
                            </div>
                        `;
                    } else {
                        container.innerHTML = pendingVideos.slice(0, 5).map(video => `
                            <div class="video-item">
                                <div class="video-info">
                                    <h4>${video.title}</h4>
                                    <div class="video-meta">上传者: ${video.uploaderName || '未知'} | ${Utils.formatTime(video.uploadTime)}</div>
                                </div>
                                <div class="video-actions">
                                    <button class="btn btn-sm btn-success" onclick="approveVideo(${video.id})">审核</button>
                                    <button class="btn btn-sm btn-danger" onclick="rejectVideo(${video.id})">拒绝</button>
                                </div>
                            </div>
                        `).join('');
                    }
                }
            } catch (error) {
                console.error('加载待审核视频失败:', error);
            }
        }

        // 加载热门课程
        async function loadPopularCourses() {
            try {
                // 这里需要根据实际的后端API来获取热门课程数据
                // 暂时显示模拟数据
                const container = document.getElementById('popularCoursesList');
                container.innerHTML = `
                    <div class="empty-state">
                        <i>🏆</i>
                        <p>暂无课程数据</p>
                        <small>课程统计功能待开发</small>
                    </div>
                `;
            } catch (error) {
                console.error('加载热门课程失败:', error);
            }
        }

        // 审核视频
        async function approveVideo(videoId) {
            Modal.confirm('确认审核通过这个视频吗？', async () => {
                try {
                    const response = await API.post(`/video/${videoId}/approve`);
                    if (response.success) {
                        Message.success('视频审核通过');
                        loadPendingVideos();
                    } else {
                        Message.error(response.message || '审核失败');
                    }
                } catch (error) {
                    Message.error('审核失败：' + error.message);
                }
            });
        }

        // 拒绝视频
        async function rejectVideo(videoId) {
            const reason = prompt('请输入拒绝原因：');
            if (reason === null) return; // 用户取消
            
            Modal.confirm('确认拒绝这个视频吗？', async () => {
                try {
                    const response = await API.post(`/video/${videoId}/reject`, {
                        reason: reason || '不符合要求'
                    });
                    if (response.success) {
                        Message.success('视频已拒绝');
                        loadPendingVideos();
                    } else {
                        Message.error(response.message || '操作失败');
                    }
                } catch (error) {
                    Message.error('操作失败：' + error.message);
                }
            });
        }

        // 定期刷新数据
        setInterval(() => {
            loadDashboardData();
        }, 60000); // 每分钟刷新一次
    </script>
</body>
</html>
